<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .palin {
      width: 320px;
      height: 560px;
      margin-left: 200px;
      position: relative;
    }

    #heroCanvas,
    #bulletCanvas,
    #bgCanvas,
    #enemyCanvas {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
    }

    #heroCanvas {
      z-index: 1;
    }

    #bulletCanvas {
      z-index: 2;
    }

    #enemyCanvas {
      z-index: 3;
    }
  </style>
</head>

<body>
  <div class="palin">
    <canvas id="enemyCanvas" width="320" height="560"></canvas>
    <canvas id="bulletCanvas" width="320" height="560"></canvas>
    <canvas id="heroCanvas" width="320" height="560"></canvas>
    <canvas id="bgCanvas" width="320" height="560"></canvas>
    <img src="./img/bullet2.png" style="display: none;" alt="">
    <img src="./img/enemy1.png" style="display: none;" alt="">
    <img src="./img/enemy2.png" style="display: none;" alt="">
    <img src="./img/enemy3.png" style="display: none;" alt="">
  </div>
</body>

</html>
<script src="./js/bgImage.js"></script>
<script src="./js/hero.js"></script>
<script src="./js/enemy.js"></script>

<script>

  window.onload = function () {
    var bgCanvas = document.getElementById('bgCanvas')
    var heroCanvas = document.getElementById('heroCanvas')
    var bulletCanvas = document.getElementById('bulletCanvas')
    var bgUrl = './img/background.png'
    var heroUrl = './img/herofly.png'
    var bulletUrl = './img/bullet2.png'

    loadImage(bgUrl, bgCanvas)  // 背景图片

    // -----------------------------------飞机
    var hero = heroImg(heroUrl, heroCanvas)  // 因为子弹需要飞机的初始化位置信息 所以这里返回出来一个飞机对象

    // -------------------------------------子弹 子弹另起一个画布 因为飞机是实时的清空画布重新绘制的
    var bullet = bulletImg(bulletUrl, bulletCanvas, hero)
    // bullet.img.onload = function () {
    //   bullet.draw()
    // }

    var bulletArr = []
    // 创建子弹对象
    setInterval(() => {
      bulletArr.push(bulletImg(bulletUrl, bulletCanvas, hero))
      // console.log(bulletArr.length);
    }, 200)

    // 循环所有的对象 让子弹对象移动起来
    setInterval(() => {
      bulletCanvas.getContext('2d').clearRect(0, 0, 320, 560)
      bulletArr.map((obj, i) => {
        // 对数组中的每一个对象都检测一下是否有超出屏幕的对象 如果有则清除这个对象
        if (bulletArr[i].isOuter()) {
          bulletArr.splice(i, 1)
        }
        obj.move()
        obj.draw()
      })
    }, 16)


    // ------------------------------敌机
    var eCanvas = document.getElementById('enemyCanvas')

    var enemyArr = []
    var timerInit = setInterval(() => {
      var num = getRandom(1, 3)
      var enemy
      // 这里也可是使用switch 进行匹配，刚刚我的图片命名是1,2,3 就直接使用模板字符串了
      switch (num) {
        case 1:
          enemy = enemyImg(38, 34, './img/enemy1.png', eCanvas)
          break
        case 2:
          enemy = enemyImg(110, 164, './img/enemy2.png', eCanvas)
          break
        case 3:
          enemy = enemyImg(46, 64, './img/enemy3.png', eCanvas)
          break
      }
      enemyArr.push(enemy)
      console.log(enemyArr.length);
    }, 200)

    var timerEnemy = setInterval(() => {
      eCanvas.getContext('2d').clearRect(0, 0, 320, 560)
      enemyArr.map((item, i) => {
        if (enemyArr[i].isOuter()) {
          enemyArr.splice(i, 1)
        }

        // 碰撞检测
        if (collide(hero, item)) {
          alert('GAMEOVER')
          clearInterval(timerEnemy)
          clearInterval(timerInit)
        }

        // 与子弹的碰撞检测
        bulletArr.map((item2, j) => {
          if (collide(item2, item)) {
            item.crash()
            bulletArr.splice(j, 1)
            enemyArr.splice(i, 1)
          }
        })

        item.move()
        item.draw()
      })
    }, 30)

  }
</script>